<template>
    <div class="card-black-full-wrapper">
        <image class="backend-img"
               src="http://cdn.www.bright-tech.cn/PeiYouCe/33a60babcf5baf157fbf406ddbb613cb/TgBccqKAh8sFVjYnfbMvJDv8RKNT22EECrqwuHqd.png"></image>
        <div class="card-user-wrapper">
            <image v-if="itemValue.ex.userPic" :src="itemValue.ex.userPic" class="user-head" @click="imgClick"></image>
            <image v-else :src="defaultPic" class="user-head" @click="imgClick"></image>
        </div>
        <div class="card-user-wrapper">
           <text class="user-name">{{itemValue.ex.name ? itemValue.ex.name : '---'}}</text>
        </div>
        <div class="bottom-container">
            <div class="bottom-item bottom-item-line" @click="testsClick">
                <text class="bottom-item-value">{{itemValue.ex.tests ? itemValue.ex.tests : '---'}}</text>
                <text class="bottom-item-text">{{'我的测评'}}</text>
            </div>
            <div class="center-line"></div>
            <div class="bottom-item bottom-item-line" @click="coursesClick">
                <text class="bottom-item-value">{{itemValue.ex.courses ? itemValue.ex.courses: '---'}}</text>
                <text class="bottom-item-text">{{'我的课程'}}</text>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    props: {
      itemValue: {
        type: Object, default: () => {
          return {ex: {}}
        },
      }
    },
    data: () => ({
      defaultPic: 'http://cdn.www.bright-tech.cn/PeiYouCe/60aa6a61e081829ad222d27a1b92963a/ufzfLDdsSHYbXIFM7rs8pZXIZMwur2X6u9kBu246.png',
    }),
    components: {},
    methods: {
      testsClick () {
        this.jumpWithParams('CommonListPage', {
          userName: this.itemValue.ex.name,
          reposName: this.itemValue.ex.name,
          title: '全部测评',
          dataType: 'userTests',
        })
      },
      coursesClick () {
        this.jumpWithParams('CommonListPage', {
          userName: this.itemValue.ex.name,
          reposName: this.itemValue.ex.name,
          title:'全部课程',
          dataType: 'userCourses',
        })
      },
      imgClick () {
      },
    },
    created () {
    },
  }
</script>

<style lang="sass"> @import '../../config/styles.scss'</style>
<style scoped>
    .card-user-wrapper{
        flex-direction: row;
        justify-content: center;

    }
    .backend-img {
        width: 750px;
        height: 574px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .user-head{
        width:142px;
        height:142px;
        margin-top:83px;
    }
    .user-name{
        margin-top:47px;
        font-size:36px;
        font-weight:bold;
        color:#434A54;
    }
    .bottom-container{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height:234px;
    }
    .center-line{
        width:2px;
        height:84px;
        background-color:#eeeeee;
    }
    .bottom-item{
        width: 350px;
        height:234px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .bottom-item-value{
        font-size:48px;
        color:#00BB9A
    }
    .bottom-item-text{
        font-size:30px;
        color:#434A54;
    }
</style>
